<template>
    <!-- eslint-disable -->
    <div class="slider" :style=" { width: width + 'px', height: height + 'px' }">
        <!-- 进度条长度 -->
        <div class="process" :style="computedProcessWidth"></div>
        <!-- 滑块位置 -->
        <div class="current" ref="current" :style="computedPositionLeft"></div>
        <!-- 滑块和tip提示位置 -->
        <div class="tip" :style="computedPositionLeft" v-show="showTip">
            <div class="tip-content">{{ (Math.floor(rangeValue/step))*step}}</div>
            <div class="tip-triangle"></div>
        </div>
        <!-- 刻度 -->
        <div v-if="step>=1" class="step_wrap">
            <div v-for="c in step" class="step"></div>
        </div>
    </div>
</template>
<script>
/* eslint-disable*/
/*
  
    (当前值 / 数值范围) = 进度条长度 / slider总长度

    rangeValue / max-min = progressWidth(此值直接计算得到，当前组件中没有变量存储) / width 
 */
export default {
	data() {
		return {
			rangeValue: this.range,
			circleClass: [],
			isShow: false
		}
	},
	props: {
		range: {
			type: Number,
			default: 0
		},
		width: {
			type: Number,
			default: 180
		},
		height: {
			type: Number,
			default: 15
		},
		disabled: {
			type: Boolean,
			default: false
		},
		step: {
			type: Number,
			default: 5
		},
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 100
		},
		showStep: {
			type: Boolean,
			default: true
		},
		showTip: {
			type: Boolean,
			default: true
		}
	},

	computed: {
		// 内部进度条长度
		computedProcessWidth() {
			return {
				width: `${(this.rangeValue / (this.max - this.min)) * 100}%`
			}
		},
		// 滑块和Tip提示距离左边位置Left
		computedPositionLeft() {
			return {
				left: `${(this.rangeValue / (this.max - this.min)) * 100}%`
			}
		}
	},
	mounted() {
		var dragging = false
		var current = this.$refs.current
		var position = null
		current.addEventListener('mousedown', e => {
			e.preventDefault()
			dragging = true
			position = [e.clientX, e.clientY]
		})
		document.addEventListener('mousemove', e => {
			e.preventDefault()
			if (dragging === false) {
				return
			}
			var direction = e.clientX - position[0]
			var addRange = Math.abs((direction / this.width) * this.max)
			if (addRange >= this.step) {
				// !很重要，鼠标按下划出场外位置还在变化，那么往回滑动时候还没有到组件边缘滑块就开始变化了
				if (this.rangeValue != this.max && this.rangeValue != this.min) {
					position = [e.clientX, e.clientY]
				}
				// >0向右flag传参为true，<0向左flag传参为false
				direction > 0 ? this.refreshSlider(addRange, true) : this.refreshSlider(addRange, false)
			}
		})
		document.addEventListener('mouseup', function(e) {
			e.preventDefault()
			dragging = false
		})
	},
	methods: {
		refreshSlider(addRange, flag) {
			// 判断方向，向右和向左滑动
			if (flag) {
				if (this.rangeValue + addRange < this.max) {
					this.rangeValue += addRange
				} else {
					this.rangeValue = this.max
				}
			} else {
				if (this.rangeValue - addRange > this.min) {
					this.rangeValue -= addRange
				} else {
					this.rangeValue = this.min
				}
			}
		}
	}
}
</script>
<style  scoped>
.slider {
	position: relative;
	border-radius: 2px;
	border: 1px solid #e9e8e8;
}
.process {
	background: #068af7;
	height: 100%;
}
.current {
	position: absolute;
	top: 0px;
	transform: translateX(-50%);
	width: 20px;
	height: 100%;
	cursor: pointer;
}
.tip {
	position: absolute;
	top: 0px;
	transform: translateY(-100%) translateX(-50%);
}
.tip-content {
	background: #000;
	color: #fff;
	min-width: 20px;
	padding: 2px 5px;
	border-radius: 3px;
	text-align: center;
}
.tip-triangle {
	width: 0;
	height: 0;
	margin: auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #000;
}
</style>